body{
    flex-direction: column;
}
// 头部
header{
    height: 200px;
    .swiper-container{
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
// 内容
main{
    overflow: scroll;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #fff;
    div{
        border-radius:15px;
    }
    .rank{
        width: 40%;
        height: 150px;
        background-color: #1592CC;
        background-image: url(../imgs/index-card-rank.png);
        background-repeat: no-repeat;
        background-size: 110px;
        background-position: left 30px;
        p{
            color: #004E73;
            font-weight: bold;
        }
        h2{
            font-size: 80px;
            text-align: right;
            color: #fff;
        }
    }
    .clock{
        position: relative;
        width: 50%;
        height: 150px;
        background:#7BCBF5 url(../imgs/index-card-sum.png) no-repeat;
        background-size: 110px;
        background-position: 10px 30px;
        p{
            color: #004E73;
            font-weight: bold;
            font-size: 20px;
        }
        .clock-punch{
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            position: absolute;
            right: 15px;
            bottom: 25px;
            border: 3px solid #004E73;
            border-radius: 20px;
        }
        
    }
    .sport-data{
        width: 43%;
        height: 110px;
        background: url(../imgs/index-card-data.png) no-repeat;
        background-size: cover;
        p{
            font-size: 16px;
        }
    }
    .sports-badge{
        width: 45%;
        height: 110px;
        color: #004E73;
        background:rgba(157,189,227,0.7) url(../imgs/index-card-badge.png) no-repeat;
        background-size: 110px;
        p{
            font-weight: bold;
        }
        h3{
            text-align: right;
            span{
                font-size: 60px;
                
            }
        }
    }
    .course{
        width: 90%;
        height: 110px;
        background: url(../imgs/index-swiper-bg2.jpg) no-repeat;
        background-size: 100%;
    }
    .outdoors{
        width: 90%;
        height: 110px;
        background: url(../imgs/index-card-run.png) no-repeat;
        background-size: 100%;
    }
}
